<template>
  <el-row :gutter="20" class="list-box">
    <!-- <playVideo ref="box" /> -->
    <el-col
      :span="6"
      v-for="(o, index) in 8"
      :key="o"
      style="margin-bottom: 20px"
    >
      <el-card :body-style="{ padding: '0px' }">
        <img src="../../static/img/311094.jpg" class="image" />
        <div style="padding: 14px">
          <span class="title" @click="toPlay(index)">中二病也要谈恋爱！</span>
          <div class="bottom"><span>发布时间：</span>2012年</div>
          <div class="type">
            <el-space wrap>
              <el-tag type="danger">恋爱</el-tag>
              <el-tag type="success">喜剧</el-tag>
            </el-space>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ElCol, ElRow, ElCard, ElButton, ElTag, ElSpace } from "element-plus";
import playVideo from "./playVideo.vue";
import { useRouter } from "vue-router";
import { ref, onMounted, getCurrentInstance } from "vue";
const router = useRouter();
const box = ref(null);
const { proxy } = getCurrentInstance();
onMounted(() => {
  // console.log(box.value.a);
  proxy.$axios
    .post("/mock/addNews", {
      title: "新增",
    })
    .then((res) => {
      return proxy.$axios.get("/mock/news");
    })
    .then((res) => {
      console.log(res);
    });
});

const toPlay = (id) => {
  router.push("/playVideo/" + id);
};
</script>

<style scoped lang="less">
.list-box {
  margin-top: 30px;

  .title {
    font-weight: bold;
    &:hover {
      text-decoration: underline;
      color: #007fff;
      cursor: pointer;
    }
  }
  .bottom {
    font-size: 14px;
    margin-top: 10px;

    span {
      font-weight: bold;
    }
  }

  .type {
    font-size: 14px;
    margin-top: 10px;
  }

  img {
    width: 100%;
    height: 236px;
    object-fit: cover;
  }
}
</style>
